<template>
    <div style="height: 100%">
        <div style="height: 100%" v-if="$store.state.exercise.paper_que_list.length===0 || $store.state.exercise.questionLoading===true">
            <a-row >
                <a-spin tip="题目加载中..." v-if="$store.state.exercise.questionLoading" style="height: 100%; overflow: auto; padding-top: 8%;">
                    <div class="spin-content">
                    </div>
                </a-spin>
            </a-row >
            <a-row v-if="$store.state.exercise.paper_que_list.length===0&&$store.state.exercise.questionLoading===false" style="height: 100%; overflow: auto; padding-top: 3%">
                <a-empty description="请选择课程进行搜索"/>
            </a-row>
        </div>
        <div style="height: 100%" v-if="$store.state.exercise.paper_que_list.length>0 && $store.state.exercise.questionLoading===false">
<!--        通过路由直接进来的情况：显示无题目-->
<!--        正常进入显示题-->
            <a-row  style="height: 100%; overflow: auto; padding-top: 3%" >
                <a-col :offset="1" :span="22" style="text-align: left">
                    <div v-for="(item,index)  in questionList" v-bind:key="item.queId" style="box-shadow: -3px 2px 7px 2px rgba(0,0,0,0.3); margin-bottom: 3%; padding-bottom:2%">
        <!--                题目行-->
                        <a-row>
                            <a-col offset="1" style="margin-top: 1%;">
                                <span style="color: #B0C5EA;">{{(currentPage-1)*20+index+1}}、</span>
                                <a-tag v-if="item.level===3" color="red">
                                    困难
                                </a-tag>
                                <a-tag v-if="item.level===1" color="green">
                                    简单
                                </a-tag>
                                <a-tag v-if="item.level===2" color="blue">
                                    中等
                                </a-tag>
                                <a-tag>{{item.type}}</a-tag>
                                <span v-html="item.content"/>
                            </a-col>
                        </a-row>
        <!--                答案行-->
                        <a-row  >
                            <a-col :offset="1" :span="23">
                            <!-- 选择题的答案类型 -->
                                <a-row v-if="item.type.search('选')>=0||item.type.search('判')>=0">
                                    <a-col :span="24" style="height: 100%">
                                        <a-checkbox-group style="width: 80%; height: 100%" >
                                            <a-row v-bind:key="ansIndex" v-for="(ansItem,ansIndex)  in item.answer" style="margin-bottom: 1%; height: 100%">
        <!--                                            答案框-->
                                                <a-radio-button style="width: 100%; height: 100%">
                                                    <div v-html="ansItem.content"/>
                                                </a-radio-button>
                                            </a-row>
                                        </a-checkbox-group>
                                    </a-col>
                                </a-row>
                            </a-col>
                        </a-row>
    <!--                    操作行-->
                        <a-row >
                            <a-col :offset="20">
                                <a-button @click="lookRes(item.queId)">查看解析</a-button>
                            </a-col>
                        </a-row>
                    </div>
                </a-col>
        <!--        答案解析框-->
                <a-modal v-model="ansModal" title="答案解析" @ok="ansModal=false" :width="900">
                    <p><b>知识点</b></p>
                    <div style="margin-left: 2%"><div v-html="nowAnswer.point"/></div>
                    <p><b>答案</b></p>
                    <div  style="margin-left: 2%;" v-for="(item,index) in nowAnswer.answer" v-bind:key="index"><div v-html="item.content"/></div>
                    <p><b>解析</b></p>
                    <div style="margin-left: 2%"><div v-html="nowAnswer.analysis"/></div>
                </a-modal>
            </a-row>
            <a-pagination @change="pageChange" :v-model="this.currentPage" :default-current="this.currentPage" :pageSize=1 :total="this.$store.state.exercise.total_page" style="margin-bottom: 3%"/>
        </div>
    </div>
</template>

<script>

    export default {
        name: "QuestionList",
        data(){
            return{
                questionList:[],
                currentPage:1,
                isCommited:true,
                ansModal:false,
                nowAnswer:{
                    analysis:'',
                    point:'',
                    answer:[]
                }
            }
        },
        mounted() {
            this.questionList = this.$store.state.exercise.paper_que_list;
        },
        methods:{
            pageChange(page){
                this.$store.state.exercise.questionLoading=true;
                this.$store.dispatch('exercise/getQuestions',{courseId:this.$store.state.exercise.now_course_id,page:page}).then(
                    res=>{
                        if(res.code === 0){
                            this.$message.error(res.msg);
                        }else{
                            this.currentPage = page;
                        }
                        this.questionList = this.$store.state.exercise.paper_que_list;
                        this.$store.state.exercise.questionLoading=false;
                    }
                ).catch(()=>{
                    this.$message.error("网络异常")
                    this.$store.state.exercise.questionLoading=false;
                })
            },
            lookRes(queId){
                const queList = this.$store.state.exercise.paper_que_list
                queList.forEach(item=>{
                    if(item.queId === queId){
                        this.nowAnswer.analysis= item.analysis;
                        this.nowAnswer.point=item.point;
                        this.nowAnswer.answer=[]
                        item.answer.forEach(ansItem=>{
                            if(ansItem.right===true){
                                this.nowAnswer.answer.push(ansItem)
                            }
                        })
                    }
                })
                this.ansModal = true;
            }
        }
    }
</script>

<style scoped>
    .success{
        width: 100%; border-color: #b7eb8f; background-color: #f6ffed; color: #52c41a;
    }
    .error{
        width: 100%; border-color: #ffa39e; background-color: #fff1f0; color: #f5222d;
    }
    .nochoose{
        width: 100%; border-color: #91d5ff; background-color: #e6f7ff; color: #1890ff;
    }
</style>